import React, { Component } from 'react';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
//登录请求
import { user_login } from '../../api/index'
import {Toast} from 'antd-mobile'
import "../../styles/login/LogIn.scss"
import logo from "../../assets/cdf-logo.webp"
import BackBox from '../BackBox';

const IconStyle = {
    fontSize: '25px',
    color: '#999999'
}

class LogIn extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            password: ''
        }
    }
    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    handleLogin() {
        console.log(this.state);
        if (this.state.phone !== '' && this.state.password !== '') {
            user_login({ phone: this.state.phone, pass: this.state.password }).then((res) => {
                console.log(res.data)
                if (res.data.code === 200) {
                    localStorage.setItem("token", res.data.token)
                    localStorage.setItem("url", res.data.userinfo.avatarUrl)
                    localStorage.setItem("userid", res.data.userinfo.id)
                    this.props.history.push('/home/HomePage')
                    Toast.show({
                        icon: 'success',
                        content: '登录成功',
                      })
                }else{
                    alert("请输入正确的手机号和密码")
                }
            })
        }else{
            alert("请输入正确的手机号和密码")
        }
    }
    toRegister() {
        this.props.history.push('/register');
    }
    render() {
        return (
            <div className='LogIn'>
                <BackBox />
                <div className='imgBox'><img src={logo} alt="" /></div>
                <div className='textBox'>
                    <UserOutlined style={IconStyle} />
                    <input name='phone' value={this.state.phone} onChange={(e) => { this.handleChange(e) }} type="text" placeholder='请输入手机号' />
                </div>
                <div className='passwordBox'>
                    <LockOutlined style={IconStyle} />
                    <input name='password' value={this.state.password} onChange={(e) => { this.handleChange(e) }} type="password" placeholder='请输入密码' />

                </div>
                <input className='buttonBox' type="button" value='登录' onClick={() => { this.handleLogin() }} />
                <div className='register' onClick={() => { this.toRegister() }}>注册</div>
            </div>
        );
    }
}

export default withRouter(LogIn);